Slideshow para fondo del blog CSS3

Con la entrada del nuevo año algunos aún están reponiendo las energías consumidas por los excesos y otros ya están pensando en cambiar el diseño del blog sin tener las ideas demasiado claras todavía.

En CODROPS si que tienen las ideas muy claras y nos presentan este fantástico tutorial para añadir un Slideshow de imágenes que ocupa todo el fondo de pantalla.

Como es costumbre ofrece varias opciones a escoger para las transiciones de imágenes y para mi ejemplo he tomado como referencia la demo nº2 que está funcionando en este blog de pruebas.

Si seguimos el tutorial ofrecido en CODROPS conseguiremos que funcione perfectamente pero el contenido del blog pasará desapercibido debido a la transparencia así que lo que haremos será añadir en outer-wrapper opacity:0.9 de esa forma la transparencia será menor y nos quedaría algo así:

#outer-wrapper {
background:#000;
width:800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
opacity:0.9;
}

Ahora nos situamos justo antes de ]]></b:skin> y añadimos los estilos necesarios para la demo nº2 si deseáramos el efecto de otra demo podemos descargar de la página del autor un archivo comprimido con todos los ejemplos y lo necesario para ponerlos en práctica.

/* Fondo- slideshow
----------------------------------------------- */
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4NZpACC7YA_brlUvr6QoOXv-LkVneulLTbGF9315RwqxdnguQxm-BwOPS_dAx8JFtCbUgfeTa5AxzBYuEsf13hwWyleeOaHelsoGotGbVjDc8ro7ef_v1gNL9oDuB6tR8ZWc97w/s1600/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVG2qjklfDeu-HeOEFCyFaSsYk9jML6mv_onZukXEQKe-gG5bUVt1L1IkhP-3a5mlmcfZNOXMsPjqYLeRkHoCnOA27UqFq7TeOBdMgH1-HCOhBs6DDIVypJGGzruRJqnZYE9KCQ/s1600/6.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEL4nZ9spgZXLg1SNF5dxEf822OggWm5Wk4_eso1RGmXNbNtBM4pK15qBAUM-RsGjK58jrA32IZa6xQfgAMq6bIdNDnY6RgVxKAUcIQplYtcV9HKqUaR1t7R-9X9R3pGCj9pmTA/s1600/5.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinC03HY1WkZvBqZbKYQosofS2YjUDK7HRjOiPThE_5mSynLCDHEyZHvY8CRMTj3htU3EE2AmwH4DZlUg4gUyRg8oertZBT0mg8bXrqwbZvaXJLEaSSAmvMjG4xpJmguzeHYIm4cA/s1600/4.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7gsm5_4rB-qAXQ0LVjDvBVJB-NydLyew-C5jtvzM0qB7XkfHN4pDwu3NPW-kXXashgL_Dks27gRzIuI0NEGUqMdHG2jZMl34VWUDzoW1b0Q33WPcuHXa5wEU5Q8ESiw_uuk6_A/s1600/3.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHBq2-Ql0c3HXi6VCSmSyNz6a_7p2DhLkNl5oK1SAOKs75Hk3F4n49Vo_jOj0ETmACSvluDsoj79Z0pfQnAXx7xWVDp9yBPSqodg7pC3je8BVRUP_g5BrjvlrJVkdvai8HfPiuw/s1600/2.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqGtfiRvxI8EFwxHKEAUXt480w2NHzThVohq1gMZ4uvCcDp4cRhmOjGkQD1tPBf8jZezLUg9DLAtkahaXhW9Sk0_ut1bdoLhdMeOxAaN0Xbc4mAaPUi1DoMCnUVA58WVd2y2-CDg/s1600/1.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
   opacity: 0;
   -webkit-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -webkit-transform: scale(1.05);
   -webkit-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -webkit-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
   opacity: 0;
   -moz-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -moz-transform: scale(1.05);
   -moz-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -moz-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
   opacity: 0;
   -o-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -o-transform: scale(1.05);
   -o-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -o-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
   opacity: 0;
   -ms-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -ms-transform: scale(1.05);
   -ms-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -ms-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
   opacity: 0;
   animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   transform: scale(1.05);
   animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
   opacity: 0;
   -webkit-transform: translateX(200px);
}
8% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
17% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
19% {
   opacity: 0;
   -webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
   opacity: 0;
   -moz-transform: translateX(200px);
}
8% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
17% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
19% {
   opacity: 0;
   -moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
   opacity: 0;
   -o-transform: translateX(200px);
}
8% {
   opacity: 1;
   -o-transform: translateX(0px);
}
17% {
   opacity: 1;
   -o-transform: translateX(0px);
}
19% {
   opacity: 0;
   -o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
   opacity: 0;
   -ms-transform: translateX(200px);
}
8% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
17% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
19% {
   opacity: 0;
   -ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
   opacity: 0;
   transform: translateX(200px);
}
8% {
   opacity: 1;
   transform: translateX(0px);
}
17% {
   opacity: 1;
   transform: translateX(0px);
}
19% {
   opacity: 0;
   transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}

En los estilos he añadido las imágenes proporcionadas en la descarga del autor, las localizamos en:
cb-slideshow li:nth-child(1 y posteriormente las terminadas en 2 - 3 - 4 - 5 - 6

También encontraremos en cb-slideshow:after la imagen pattern.png. Todas ellas las podemos sustituir por otras teniendo en cuenta que miden 1024x 683 excepto pattern.png.

Una vez añadimos los estilos nos situamos justo después de <body>; y añadimos el HTML

        <ul class="cb-slideshow">
          <li><span>Image 01</span><div><h3>se·ren·i·ty</h3></div></li>
          <li><span>Image 02</span><div><h3>com·po·sure</h3></div></li>
          <li><span>Image 03</span><div><h3>e·qua·nim·i·ty</h3></div></li>
          <li><span>Image 04</span><div><h3>bal·ance</h3></div></li>
          <li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
          <li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
      </ul>

Sustituimos las letras que van apareciendo en la demo por las de nuestra elección (sólo las letras)

A continuación justo antes de </head> pegamos el contenido del siguiente archivo que es el script.

Y por último recordar que las imágenes de este tutorial son de Mark Sebastian.
http://creativecommons.org/licenses/by-sa/2.0/deed.en
Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0